<template>
	<cl-dialog
		title="修改预约时间"
		width="600px"
		:visible.sync="visible"
		@close="close"
		:props="{
			beforeClose: beforeClose,
			appendToBody: true,
			closeOnClickModal: false,
     
		}"
	>
		<el-form v-loading="loading" ref="form" label-position="top" :model="form" :rules="rules" :disabled="saving">
			<el-row :gutter="20">
				<el-col :span="24">
					<el-form-item label="是否预约到店" prop="appoint_arrive" required>
						<el-radio-group v-model="form.appoint_arrive" @change="appointArriveChange">
							<el-radio :label="0">否</el-radio>
							<el-radio :label="1">是</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="新客/老客" prop="cus_type">
						<el-radio-group v-model="cus_type"">
							<el-radio :label="2">老客</el-radio>
							<el-radio :label="1">新客</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<template v-if="form.appoint_arrive">
					<el-col :span="12">
						<el-form-item label="预约时长" prop="cart_duration">
							<cart-duration v-model="form.cart_duration" style="width: 100%" :disabled="this.cart_duration_disabled" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="预约城市" prop="city_id">
							<cl-select
								v-model="form.city_id"
								placeholder="请选择"
								filterable
								clearable
								disabled
								style="width: 100%"
							>
								<el-option
									v-for="item in cityList"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</cl-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="预约门店" prop="dept_id">
							<cl-shop-select
								v-model="form.dept_id"
								placeholder="请选择预约门店"
								filterable
								style="width: 100%"
								disabled
								only-open
								:biz_id="form.biz_id"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item prop="appoint_time" label="预约时间">
							<div class="flex flex-center">
								<el-input
									v-model="form.appoint_time"
									type="text"
									placeholder="请填写预约时间"
									disabled
								>
								</el-input>
								<el-button type="primary" size="mini" @click="onSelectTime"
									>选择预约时间</el-button
								>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="未成交原因" prop="cause">
							<cl-select
								v-model="form.cause"
								placeholder="请选择未成交原因"
								style="width: 100%"
							>
								<el-option label="售前原因" :value="1" />
								<el-option label="售中原因" :value="2" />
								<el-option label="门店原因" :value="3" />
								<el-option label="客户原因" :value="4" />
							</cl-select>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="原因描述(可附最多五张张图,图片非必传)" prop="detail">
							<el-input
								v-model="form.detail"
								placeholder="请填定原因"
								type="textarea"
								:rows="3"
								style="margin-bottom: 15px"
							/>
							<cl-upload
								multiple
								:limit="5"
								:limit-size="5"
								list-type="picture-card"
								ref="uploads"
								v-model="images"
								:on-success="onUploadSuccess"
							/>
						</el-form-item>
					</el-col>
				</template>
				<template v-else>
					<div>
						<el-col :span="24">
							<el-form-item label="未成交原因" prop="cause">
								<cl-select
									v-model="form.cause"
									placeholder="请选择未成交原因"
									style="width: 100%"
								>
									<el-option label="售前原因" :value="1" />
									<el-option label="售中原因" :value="2" />
									<el-option label="门店原因" :value="3" />
									<el-option label="客户原因" :value="4" />
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item
								label="原因描述(可附最多五张张图,图片非必传)"
								prop="detail"
							>
								<el-input
									v-model="form.detail"
									placeholder="请填定原因"
									type="textarea"
									:rows="3"
									style="margin-bottom: 15px"
								/>
								<cl-upload
									multiple
									:limit="5"
									:limit-size="5"
									list-type="picture-card"
									ref="uploads"
									v-model="images"
									:on-success="onUploadSuccess"
								/>
							</el-form-item>
						</el-col>
					</div>
				</template>
			</el-row>
		</el-form>
		<template #footer>
			<el-button @click="close">关闭</el-button>
			<el-button type="primary" :loading="saving" @click="submit">确定</el-button>
		</template>
    <!-- <van-popup v-model="showTimePop" position="bottom">
      <van-datetime-picker
   
      @cancel="showTimePop = false"
      @confirm="confirmTimePicker"
  v-model="mobile_appoint_time"
  type="datetime"
  title="选择预约时间"
/></van-popup> -->
      <ReservationIndexPop ref="reservationIndexPopRef" />
	</cl-dialog>
</template>
<script>
import ReservationIndexPop from "./reservationIndexPop";//修改时间弹窗
import { mapGetters} from 'vuex'
import {computed} from 'vue'
import CartDuration from "@/components/cart-duration.vue";
import dayjs from "dayjs";

export default {
	name: "modify-cart-time",
	components: {
		CartDuration,
    ReservationIndexPop
	},
	inject: ["$layout"],
computed: {
		...mapGetters(["browser"])
	},
	data() {
		return {
			cityList: [],
			visible: false,
			saving: false,
			images: [],
			form: {
				biz_id: "",
				dept_id: "",
				cart_id: "",
				cus_id: "",
				appoint_time: "",
				appoint_date: "",
				appoint_btime: "",
				appoint_arrive: 0,
				cart_duration: "",
				city_id: "",
				cause: "",
				detail: "",
				bed: 0,
			},
			cus_type: 0,
			rules: {
				dept_id: [{ required: true, message: "请选择预约门店" }],
				appoint_time: [{ required: true, message: "请选择预约时间" }],
				cart_duration: [{ required: true, message: "请选择预约时长" }],
				city_id: [{ required: true, message: "请选择预约城市" }]
				// cause: [{ required: true, message: "请选择未到店原因", trigger: "change" }],
				// detail: [{ required: true, message: "请填写原因", trigger: "change" }]
			},
			cart_duration_disabled: false,
      showTimePop:false,
      mobile_appoint_time:'',
      loading:false
		};
	},
	methods: {
	async	open(data = {}) {
		console.log('操作打开弹窗');
    
			this.visible = true;
      this.loading = true;
			// this.form = { ...data };
			Object.keys(this.form).forEach(key => {
				this.form[key] = data[key] ?? "";
			});
			this.cus_type = data.cus_type;
			this.form.appoint_arrive = 1;
			this.form.appoint_time = data.appoint_date;
			this.images = [];
			console.info("data", this.form);
		await	this.getCityList();
		await	this.getDeptInfo();
           this.loading = false;
		},
		close() {
			this.visible = false;
		},
		beforeClose(done) {
			!this.saving && done();
			this.$refs.form.resetFields();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
        // 添加判断是否是手机端
        // if(this.browser.isMobile)this.form.appoint_date=dayjs(this.mobile_appoint_time).format("YYYY-MM-DD")
				this.saving = true;
				const { appoint_date } = this.form;
				this.form.cus_type = this.cus_type
				const query = {
					...this.form,
					appoint_date: dayjs(appoint_date).format("YYYY-MM-DD"),
					update_type: 2,
					images: this.images.length ? this.images.toString(",") : this.images.toString(",")
				};
				if (appoint_date == "待定时间") {
					await this.$service.cart
						.update({
							...this.form,
							appoint_date: "",
							update_type: 2,
							images: this.images.length ? this.images.toString(",") : this.images.toString(",")
						})
						.done(() => {
							this.saving = false;
						});
				} else {
					await this.$service.cart.update(query).done(() => {
						this.saving = false;
					});
				}

				this.$message.success("操作成功");
				this.$emit("confirm",query);
				this.close();
			});
		},
		appointArriveChange() {
			// this.form.cart_duration = "";
			// this.form.appoint_date = "";
			// this.form.appoint_btime = "";
		},
		// 选择预约时间
		onSelectTime() {
	const { biz_id, dept_id, cart_duration, city_id, appoint_info = {} } = this.form;
			const { cus_type } = this;
			const params = {
				biz_id: biz_id,
				dept_id: dept_id,
				cart_duration: cart_duration,
				city_id: city_id,
				cus_type
			};
      this.$refs.reservationIndexPopRef.open(
        	params,
				"选择预约时间",
				"selectTime",
				this.selectTimeCall);
		},
    confirmTimePicker(){
this.form.appoint_time=dayjs(this.mobile_appoint_time).format("YYYY-MM-DD HH:mm")
this.form.appoint_date = dayjs(this.mobile_appoint_time).format("YYYY-MM-DD");
			this.form.appoint_btime = dayjs(this.mobile_appoint_time).format("HH:mm")
this.showTimePop=false
    },
		selectTimeCall(data = null) {
			if (!data) return false;
			console.info("data", data);

			this.form.city_id = data.city_id;
			this.form.dept_id = data.dept_id;
			this.form.appoint_time = data.appoint_time;
			this.form.appoint_date = data.appoint_date;
			this.form.appoint_btime = data.appoint_btime;
			this.form.bed = data.bed;
			if (data.cart_duration > 0) {
				this.cart_duration_disabled = true;
				this.form.cart_duration = data.cart_duration;
			}
			else {
				this.cart_duration_disabled = false;
			}
		},
		onUploadSuccess() {},
		async getCityList() {
			const { biz_id } = this.form;
	await		this.$service.ad.citylists({ biz_id }).then(data => {
				let list = (data || []).map(v => ({ ...v, label: v.name, value: v.id }));
				this.cityList = list;
			});
		},
		async getDeptInfo() {
			const { dept_id } = this.form;
	await		this.$service.dept.getDeptInfo({ dept_id }).then(data => {
				if (data.cart_duration > 0 ) { 
					this.form.cart_duration = data.cart_duration
					this.cart_duration_disabled = true;
				}
			})
		}
	}
};
</script>
